<template>
  <div>
    <el-row>
      <el-dialog
        title="修改员工上班时间"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-select v-model="value_hour" placeholder="请选择上班时">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value_min" placeholder="请选择上班分钟">
          <el-option
            v-for="item in min_option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="singinComit">确 定</el-button>
  </span>
      </el-dialog>

      <el-col :span="12" :offset="6">
        <el-card class="box-card" style="margin-top: 30px">
          <div slot="header">
            <span>员工上班时间</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">修改</el-button>
          </div>
          <h2>
            {{this.signin}}
          </h2>
        </el-card>
        <el-card class="box-card" style="margin-top: 30px">
          <div slot="header">
            <span>员工下班时间</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="centerDialogVisible = true">修改</el-button>
          </div>
          <h2>
            {{signout}}
          </h2>
        </el-card>

        <el-dialog
          title="修改员工下班时间"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
            <el-select v-model="value_hour" placeholder="请选择下班时">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value_min" placeholder="请选择下班分钟">
          <el-option
            v-for="item in min_option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

          <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="singoutComit">确 定</el-button>
  </span>
        </el-dialog>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'EditSignTimeView',
    data () {
      return {
        signin: '',
        signout: '',
        dialogVisible: false,
        signin_hour: '',
        signin_min: '',
        signout_hour: '',
        signout_min: '',
        centerDialogVisible:false,
        options: [
          {
            'label': '7点',
            'value': 7
          },
          {
            'label': '8点',
            'value': 8
          },
          {
            'label': '9点',
            'value': 9
          },
          {
            'label': '10点',
            'value': 10
          },
          {
            'label': '11点',
            'value': 11
          },
          {
            'label': '12点',
            'value': 12
          },
          {
            'label': '13点',
            'value': 13
          },
          {
            'label': '14点',
            'value': 14
          },
          {
            'label': '15点',
            'value': 15
          },
          {
            'label': '16点',
            'value': 16
          },
          {
            'label': '17点',
            'value': 17
          },
          {
            'label': '18点',
            'value': 18
          },
          {
            'label': '19点',
            'value': 19
          },
          {
            'label': '20点',
            'value': 20
          },
          {
            'label': '21点',
            'value': 21
          },
          {
            'label': '22点',
            'value': 22
          },
          {
            'label': '23点',
            'value': 23
          },
        ],
        min_option: [{
          'value': 0,
          'label': '00分'
        }, {
          'value': 30,
          'label': '30分'
        }],
        value_hour: '',
        value_min: ''
      }
    },
    methods: {
      get_data () {
        this.$axios({
          url: this.$settings.base_url + '/user/editsigntime/',
          method: 'get'
        }).then(res => {
          this.signin = res.data.signin
          this.signout = res.data.signout
        })
      },
      singinComit () {
        if (this.value_hour === '' || this.value_min === '') {
          this.$message.error('设置上班时间，必须设置时和分钟')
        } else {
          this.$axios({
            url:this.$settings.base_url+'/user/editsigntime/',
            method: 'put',
            data:{'signin_hour':this.value_hour,'signin_min':this.value_min,'signin':true}
          }).then(res=>{
            if (res.data.code===100){
              this.$message.success('修改上班时间成功')
              this.dialogVisible = false
              this.get_data()
              this.value_min=''
              this.value_hour=''
            }else {
              this.$message.error('修改上班时间失败')
            }
          })
        }

      },
       singoutComit (){
        if (this.value_hour === '' || this.value_min === '') {
          this.$message.error('设置下班时间，必须设置时和分钟')
        } else {
          this.$axios({
            url:this.$settings.base_url+'/user/editsigntime/',
            method: 'put',
            data:{'signout_hour':this.value_hour,'signout_min':this.value_min,'signout':true}
          }).then(res=>{
            if (res.data.code===100){
              this.$message.success('修改下班时间成功')
              this.centerDialogVisible = false
              this.get_data()
              this.value_min=''
              this.value_hour=''
            }else {
              this.$message.error('修改下班时间失败')
            }
          })
        }

      },


    },
    mounted () {
      this.get_data()
    }

  }
</script>

<style scoped>

</style>
